<template>
  <div class="app-container">
    <!-- 查询条件表单开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
      <!-- 患者姓名输入框 -->
      <el-form-item label="患者姓名" prop="patientName">
        <el-input
            v-model="queryParams.patientName"
            placeholder="请输入患者姓名"
            clearable
            size="small"
            style="width:240px"
        />
      </el-form-item>
      <!-- 挂号单号输入框 -->
      <el-form-item label="挂号单号" prop="regId">
        <el-input
            v-model="queryParams.regId"
            placeholder="请输入挂号单号"
            clearable
            size="small"
            style="width:240px"
        />
      </el-form-item>
      <!-- 查询和重置按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件表单结束 -->

    <!-- 数据表格开始 -->
    <el-table v-loading="loading" border :data="orderBackfeeTableList">
      <el-table-column label="退费订单号" align="center" width="210" prop="backId"/>
      <el-table-column label="挂号单号" align="center" width="200" prop="regId"/>
      <el-table-column label="患者姓名" align="center" prop="patientName"/>
      <el-table-column label="总金额" align="center" prop="backAmount"/>
      <el-table-column label="退费类型" align="center" prop="backType" :formatter="backTypeFormatter"/>
      <el-table-column label="订单状态" prop="backStatus" align="center" :formatter="backStatusFormatter"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <!-- 操作列 -->
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" size="mini" @click="handleViewItem(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格结束 -->

    <!-- 分页控件开始 -->
    <el-pagination
        v-show="total > 0"
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->

    <!-- 查看详情的弹出层开始 -->
    <el-dialog
        v-loading="loading"
        :title="title"
        :visible.sync="open"
        width="1000px"
        center
        append-to-body
    >
      <!-- 详情表格 -->
      <el-table v-loading="itemTableloading" border :data="orderChargeItemList">
        <el-table-column label="详情ID" align="center" width="210" prop="itemId"/>
        <el-table-column label="处方ID" align="center" width="200" prop="coId"/>
        <el-table-column label="名称" align="center" prop="itemName"/>
        <el-table-column label="价格" align="center" prop="itemPrice"/>
        <el-table-column label="数量" align="center" prop="itemNum"/>
        <el-table-column label="小计" prop="itemAmount" align="center"/>
        <el-table-column label="类型" align="center" prop="itemType">
          <template slot-scope="scope">
            {{ scope.row.itemType === '0' ? '药品' : '检查' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter"/>
      </el-table>
      <!-- 弹出层底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 查看详情的弹出层结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false, // 主表格的加载状态
      itemTableloading: false, // 详情表格的加载状态
      total: 0, // 数据总条数，用于分页
      title: '', // 弹出层标题
      open: false, // 弹出层的显示状态
      queryParams: { // 查询条件
        pageNum: 1,
        pageSize: 5,
        patientName: '', // 默认空字符串
        regId: '' // 默认空字符串
      },
      orderBackfeeTableList: [], // 退费订单表格数据
      orderStatusOptions: [], // 订单状态字典数据
      orderChargeItemList: [], // 详情表格数据
      statusOptions: [], // 详情状态字典数据
      payTypeOptions: [], // 支付类型字典数据
    };
  },
  created() {
    // 页面加载时初始化数据
    this.listOrderCharge(); // 查询订单数据
    this.loadPayType(); // 加载支付类型字典数据
    this.loadOrderStatus(); // 加载订单状态字典数据
    this.loadDetailedStatus(); // 加载详情状态字典数据
  },
  methods: {
    // 查询订单数据
    listOrderCharge() {
      this.loading = true;
      this.$http.post("/charge/backFee/listByPage", this.queryParams).then(res => {
        this.loading = false;
        if (res.data.code === 200) {
          this.orderBackfeeTableList = res.data.data.records;
          this.total = res.data.data.total;
        } else {
          this.$message.error("查询失败");
        }
      }).catch(error => {
        this.loading = false;
        this.$message.error("查询失败: " + error.message);
      });
    },
    // 处理查询按钮点击事件
    handleQuery() {
      this.queryParams.pageNum = 1; // 每次查询都从第一页开始
      this.listOrderCharge();
    },
    // 处理重置按钮点击事件
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        patientName: '', // 重置为空字符串
        regId: '' // 重置为空字符串
      };
      this.listOrderCharge();
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.listOrderCharge();
    },
    // 处理分页页码变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.listOrderCharge();
    },
    // 加载支付类型字典数据
    loadPayType() {
      this.$http.get("/system/dict/data/type/his_pay_type_status").then(resp => {
        this.payTypeOptions = resp.data.data;
      });
    },
    // 加载订单状态字典数据
    loadOrderStatus() {
      this.$http.get("/system/dict/data/type/his_backfee_status").then(resp => {
        this.statusOptions = resp.data.data;
      });
    },
    // 加载详情状态字典数据
    loadDetailedStatus() {
      this.$http.get("/system/dict/data/type/his_order_details_status").then(resp => {
        this.orderStatusOptions = resp.data.data;
      });
    },
    // 格式化退费类型显示
    backTypeFormatter(row) {
      const type = this.payTypeOptions.find(item => item.dictValue === row.backType);
      return type ? type.dictLabel : "未知";
    },
    // 格式化订单状态显示
    backStatusFormatter(row) {
      const status = this.statusOptions.find(item => item.dictValue === row.backStatus);
      return status ? status.dictLabel : "未知";
    },
    // 格式化详情状态显示
    statusFormatter(row) {
      const status = this.orderStatusOptions.find(item => item.dictValue === row.status);
      return status ? status.dictLabel : "未知";
    },
    // 查看详情逻辑
    handleViewItem(row) {
      this.title = `查询【${row.patientName}】支付订单详情`;
      this.open = true;
      this.itemTableloading = true;
      this.$http.get(`/charge/orderItemFee/List/${row.backId}`).then(res => {
        this.orderChargeItemList = res.data.data;
        this.itemTableloading = false;
      }).catch(() => {
        this.$message.error('查询失败');
        this.itemTableloading = false;
      });
    },
    // 关闭详情弹出层
    cancel() {
      this.open = false;
    },
  }
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
